@property --distance1 {
	syntax: '<length>'; /* <- defined as type length for the transition to work */
	initial-value: 0;
	inherits: false;
}

@property --distance2 {
	syntax: '<length>'; /* <- defined as type length for the transition to work */
	initial-value: 0;
	inherits: false;
}

.umbrel-fade-scroller-x,
.umbrel-fade-scroller-y {
	/* 8ms animates in 5 frames assuming 60fps */
	transition:
		--distance1 80ms ease-out,
		--distance2 80ms ease-out;
}

.umbrel-fade-scroller-y {
	mask-image: linear-gradient(to bottom, transparent, red var(--distance1) calc(100% - var(--distance2)), transparent);
}

.umbrel-fade-scroller-x {
	mask-image: linear-gradient(to right, transparent, red var(--distance1) calc(100% - var(--distance2)), transparent);
}
